<template>
  <div id="weatherbody">
    <back></back>
    <div id="sreach">
      <el-select v-model="currentcity" filterable placeholder="请选择">
        <el-option
          v-for="item in citys"
          :key="item.id"
          :label="item.district + '-' + item.city + '市'"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button @click="sreach" type="primary" icon="el-icon-search"
        >获取天气</el-button
      >
    </div>
    <div id="content" v-show="isshow">
      <div v-if="weather.realtime.temperature != ''">
        温度:<span id="temperature">{{ weather.realtime.temperature }}</span
        >℃
      </div>
      <div id="info">天气:{{ weather.realtime.info }}</div>
      <div id="info">
        风向:{{ weather.realtime.direct + weather.realtime.power }}
      </div>
      <div id="info">
        空气质量
        <el-tag :color="aqiLevel" effect="dark">
          {{ weather.realtime.aqi }}
        </el-tag>
      </div>
      <div>
        <el-tag
          v-for="value in life"
          :key="value.des"
          :type="value.info"
          :title="value.des"
          style="margin-left: 15px"
          effect="dark"
        >
          {{ value.v }}
        </el-tag>
      </div>
      <div id="abc">
        <div id="echarts" style="width: 600px; height: 400px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "../utill/Api.config.js";
import Back from "../components/back.vue";
export default {
  name: "weather",
  components: {
    back: Back,
  },
  mounted() {
    this.axios.get(Api.Weather.getCitys).then((response) => {
      if (response.data.error_code == 0) {
        this.citys = response.data.result;
      } else {
        this.$message.error(response.data.reason);
      }
    });
    document.body.style.backgroundImage = this.bodyBgImage;
  },
  beforeDestroy() {
    // 离开页面的时候清除
    document.body.style.backgroundImage = "";
  },
  data() {
    return {
      currentcity: "",
      citys: [],
      bodyBgImage: "url(" + require("../assets/sun.jpg") + ")",
      weather: {
        realtime: {
          temperature: "",
          info: "",
          direct: "",
          power: "",
        },
      },
      life: {},
      futuredate: [],
      height: [],
      low: [],
      isshow: false,
    };
  },
  computed: {
    aqiLevel() {
      var aqiLevel = "";
      if (this.weather.realtime.aqi <= 50) {
        return "#00FF00";
      } else if (this.weather.realtime.aqi <= 100) {
        return "#FFFF00";
      } else if (this.weather.realtime.aqi <= 150) {
        return "#FF9900";
      } else if (this.weather.realtime.aqi <= 200) {
        return "#FF0000";
      } else if (this.weather.realtime.aqi <= 300) {
        return "#800080";
      } else {
        return "#800000";
      }
    },
  },
  methods: {
    sreach() {
      const _this = this;
      this.axios.all([_this.getWeather(), _this.getLife()]).then(
        _this.axios.spread(function (citys, lifes) {
          if (citys.data.error_code != 0) {
            _this.$message.error(citys.data.reason);
          } else {
            _this.$message.success(citys.data.reason);
            _this.weather = citys.data.result;
          }
          if (lifes.data.error_code == 0) {
            _this.life = lifes.data.result.life;
          }
          for (var item of citys.data.result.future) {
            var arr = item.temperature.split("/");
            var arr2 = arr[1].split("℃");
            _this.low.push(arr[0]);
            _this.height.push(arr2[0]);
            _this.futuredate.push(item.date);
          }
          _this.echarts();
          console.log(_this.weather);
          if (_this.weather.realtime.info.indexOf("雨") != -1) {
            _this.bodyBgImage = "url(" + require("../assets/rain.jpg") + ")";
          }
          if (_this.weather.realtime.info.indexOf("雪") != -1) {
            _this.bodyBgImage = "url(" + require("../assets/snow.jpg") + ")";
          }
          _this.isshow = true;
        })
      );
    },
    getWeather() {
      return this.axios.get(Api.Weather.getWeather(this.currentcity));
    },
    getLife() {
      return this.axios.get(Api.Weather.getLife(this.currentcity));
    },
    echarts() {
      console.log(123456789);
      var myChart = this.$echarts.init(document.getElementById("echarts"));
      var option = {
        title: {
          text: "未来五天气温",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          iconStyle:{
               color:'#fff'
          }
        },
        legend: {
          data: ["最高气温", "最低气温"],
          textStyle:{
            color:'#fff'
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
            emphasis :{
              iconStyle:{
                color:'#fff'
              }
            },
            color:'#ffffff'
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.futuredate,
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            name: "最高气温",
            type: "line",
            data: this.height,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
            itemStyle: {
              normal: {
                color: "red",
              },
            }
          },
          {
            name: "最低气温",
            type: "line",
            data: this.low,
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "最大值",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
            itemStyle: {
              normal: {
                color: "blue",
              },
            }
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
body {
  background-repeat: no-repeat;
  background-size: cover;
}
#sreach {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#weatherbody {
  color: white;
}
#content {
  width: 780px;
  margin-left: auto;
  margin-right: auto;
}
#content div {
  margin-top: 10px;
  text-align: center;
}
#temperature {
  font-size: 45px;
  margin-left: 5px;
  margin-right: 5px;
}
#abc {
  padding-top: 50px;
  padding-left: 50px;
}
</style>
